<template>
	<view class="content">
		<!-- 橙色区域 -->
		<view class="top-box">
			<view class="status_bar">
			    <!-- 这里是状态栏 -->
			</view>
			<view class="info-box" v-if="userinfo==null">
				<!-- 头像 -->
				<image src="http://cloud.bxwhl.com/assets/common/img/header.png" mode="aspectFill"></image>
				<view class="nick">
					<view @click="navTo('/pages/login/login','0')">请登录</view>
					<!-- <view>普通会员</view> -->
				</view>
				<!-- 签到 -->
				<view class="sign"></view>
			</view>
			<view class="info-box" v-if="userinfo!=null">
				<!-- 头像 -->
				<image :src="userinfo.avatarUrl" mode="aspectFill" @click="navTo('/pages/user/info/userinfo','1')"></image>
				<view class="nick" @click="navTo('/pages/user/info/userinfo','1')">
					<view>{{userinfo.username}}</view>
					<!-- <view>普通会员</view> -->
				</view>
				<!-- 签到 -->
				<view class="sign"></view>
			</view>
			<view class="set" @click="set">
				设置
			</view>
		</view>
		<!-- 资料和钱包 -->
		<view class="wallet-box">
			<view class="wallet-item" @click="navTo('/pages/user/info/userinfo','1')">
				<image src="../../static/usericon/q-1.png" mode=""></image>
				<view>我的资料</view>
			</view>
			<view class="wallet-item" @click="navTo('/pages/user/healthy/healthy','1')">
				<image src="../../static/usericon/q-2.png" mode=""></image>
				<view>健康管理</view>
			</view>
			<view class="wallet-item" @click="navTo('/pages/user/wallet/wallet','1')">
				<image src="../../static/usericon/q-3.png" mode=""></image>
				<view>我的钱包</view>
			</view>
			<view class="wallet-item" @click="navTo('/pages/user/share/share','1')">
				<image src="../../static/usericon/q-4.png" mode=""></image>
				<view>推荐好友</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order-box">
			<view class="title">
				<view>全部订单</view>
				<view @click="navTo('/pages/order/orderlist?index=4','1')">
					查看全部订单
					<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
				</view>
			</view>
			<view class="order-item">
				
				<view class="order-li" @click="navTo('/pages/order/orderlist?index=0','1')">
					<view class="status" v-if="userinfo!=null&&userinfo.waitPayNum>0">{{userinfo.waitPayNum}}</view>
					<image src="../../static/usericon/d-2.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class="order-li" @click="navTo('/pages/order/orderlist?index=1','1')">
					<view class="status" v-if="userinfo!=null&&userinfo.waitDeliverNum>0">{{userinfo.waitDeliverNum}}</view>
					<image src="../../static/usericon/d-1.png" mode=""></image>
					<view>待发货</view>
				</view>
				<view class="order-li" @click="navTo('/pages/order/orderlist?index=2','1')">
					<view class="status" v-if="userinfo!=null&&userinfo.waitReceivingNum>0">{{userinfo.waitReceivingNum}}</view>
					<image src="../../static/usericon/d-3.png" mode=""></image>
					<view>待收货</view>
				</view>
				<view class="order-li" @click="navTo('/pages/order/orderlist?index=3','1')">
					<view class="status" v-if="userinfo!=null&&userinfo.waitEvaluate>0">{{userinfo.waitEvaluate}}</view>
					<image src="../../static/usericon/d-4.png" mode=""></image>
					<view>待评价</view>
				</view>
			</view>
		</view>
		<!-- 我的市场 -->
		<view class="market">
			<view class="title">
				<view>我的市场</view>
			</view>
			<view class="order-item">
				<view class="order-li" @click="navTo('/pages/market/publish/publishList','1')">
					<image src="../../static/usericon/s-1.png" mode=""></image>
					<view>已发布</view>
				</view>
				<view class="order-li" @click="navTo('/pages/market/sell/sell','1')">
					<image src="../../static/usericon/s-2.png" mode=""></image>
					<view>已卖出</view>
				</view>
				<view class="order-li" @click="navTo('/pages/market/buy/buy','1')">
					<image src="../../static/usericon/s-3.png" mode=""></image>
					<view>已购买</view>
				</view>
			</view>
		</view>
		<!-- 更多功能 -->
		<view class="gong">
			<view class="title">
				<view>我的市场</view>
			</view>
			<view class="order-item">
				<view class="order-li gong-li" @click="navTo('/pages/user/coupon/coupon','1')">
					<image src="../../static/usericon/g-1.png" mode=""></image>
					<view>我的卡券</view>
				</view>
				<view class="order-li gong-li" @click="follow">
					<image src="../../static/usericon/g-2.png" mode=""></image>
					<view>我的头衔</view>
				</view>
				<view class="order-li gong-li" @click="navTo('/pages/user/wallet/detailed','1')">
					<image src="../../static/usericon/g-3.png" mode=""></image>
					<view>交易明细</view>
				</view>
				<view class="order-li gong-li" @click="navTo('/pages/safe/securityCenter','1')">
					<image src="../../static/usericon/g-4.png" mode=""></image>
					<view>安全中心</view>
				</view>
				<view class="order-li gong-li" @click="navTo('/pages/user/feedback','1')">
					<image src="../../static/usericon/g-5.png" mode=""></image>
					<view>我要反馈</view>
				</view>
				<view class="order-li gong-li" @click="follow">
					<image src="../../static/usericon/g-6.png" mode=""></image>
					<view>关联账号</view>
				</view>
				<view class="order-li gong-li" @click="follow">
					<image src="../../static/usericon/g-7.png" mode=""></image>
					<view>关于我们</view>
				</view>
				<view class="order-li gong-li" @click="follow">
					<image src="../../static/usericon/g-8.png" mode=""></image>
					<view>常见问题</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {userinfo} from"../../api/user.js"
	import {
		genTestUserSig
	} from '../../static/utils/GenerateTestUserSig'
	export default {
		components: {},
		data() {
			return {
				userinfo:null
			};
		},
		// 
		onLoad() {
			
		},
		onShow(){
			if(uni.getStorageSync("userInfo")){
				this.getuserinfo()
			}else{
				this.userinfo=null
			}
			if(uni.getStorageSync("user")&&uni.getStorageSync("userInfo")){
				this.imlogin()
			}
		},

		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			imlogin() {
				let id=uni.getStorageSync('userInfo').userId
				console.log(id)
				this.tim.login({
					userID:id.toString(),
					userSig: genTestUserSig(id.toString()).userSig
				}).then(res => {
					console.log("登录成功", res)
					this.ready()
				}).catch((err) => {
					console.log('err', err)
				})
			},
			ready() {
				let onSdkReady = (e)=> {
					console.log("ready",e)
					// 设置个人资料，这个实际开发中应该用户注册后就应该设置
					this.setInfo()
				};
				this.tim.on(this.TIM.EVENT.SDK_READY, onSdkReady);
			},
			setInfo(){
				let name=uni.getStorageSync("user").username
				if(name==null){
					name="昵称未设置"
				}
				let avatar=uni.getStorageSync("user").avatarUrl
				// 修改个人标配资料
				let promise = this.tim.updateMyProfile({
					nick: name,
					avatar:avatar,
					gender: this.TIM.TYPES.GENDER_MALE,
					selfSignature: '我的个性签名',
					allowType: this.TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
				});
				promise.then((imResponse) => {
					console.log('更新资料成功', imResponse.data); // 更新资料成功
				}).catch(function(imError) {
					console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
				});
			},
			set(){
				uni.navigateTo({
					url:"/pages/user/set"
				})
			},
			follow(){
				this.msg("敬请期待","none")
			},
			// 统一跳转
			navTo(url,type){
				// type=0不要登录 1 需要登录
				if(type==0){
					uni.navigateTo({
						url:url
					})
				}else{
					if(this.Md.islogin()){
						uni.navigateTo({
							url:url
						})
					}
				}
			},
			// 获取用户资料
			async getuserinfo(){
				let res=await this.get(userinfo)
				this.userinfo=res.data
				uni.setStorageSync("user",res.data)
			}
			
		}
	}
</script>
<style lang="less" scoped>
	.set{
		position: absolute;
		right:30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		top:calc( var(--status-bar-height) + 30rpx) ;
	}
	.status{
		position: absolute;
		top: -10rpx;
		left: 90rpx;
		color: #FFFFFF;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		background-color: #ec3e60;
		text-align: center;
		line-height: 30rpx;
		z-index: 9;
		font-size: 24rpx;
	}
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.content{
		background: #F5F5F5;
		height: 100vh;
	}
	.top-box{
		width: 750rpx;
		height:calc(345rpx + var(--status-bar-height));
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		padding-top: 60rpx;
		box-sizing: border-box;
	}
	.info-box{
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		
	}
	.nick{
		width: 392rpx;
		color: #FFFFFF;
		margin-left: 22rpx;
		font-size: 40rpx;
	}
	.nick :nth-child(2){
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.sign{
		width: 126rpx;
		height: 51rpx;
		// background: #FFFFFF;
		border-radius: 26rpx;
		text-align: center;
		line-height: 51rpx;
		font-size: 24rpx;
		color: #F09238;
	}
	.wallet-box{
		width: 690rpx;
		height: 143rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		margin-top: -70rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
	.wallet-item{
		width: 25%;
		color: #666666;
		font-size: 24rpx;
		text-align: center;
		image{
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 12rpx;
		}
	}
	.order-box{
		width: 690rpx;
		height: 199rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 30rpx;
		padding: 20rpx;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
	}
	.title :nth-child(1){
		font-size: 28rpx;
		font-weight: bold;
	}
	.title :nth-child(2){
		font-size: 20rpx;
	}
	.order-item{
		display: flex;
		align-items: center;
		margin-top: 36rpx;
		flex-wrap: wrap;
	}
	.order-li{
		position: relative;
		width: 25%;
		text-align: center;
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.market{
		width: 690rpx;
		height: 199rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 30rpx;
		padding: 20rpx;
	}
	.gong{
		width: 690rpx;
		// height: 321rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 30rpx;
		padding: 20rpx;
	}
	.gong-li{
		height: 122rpx;
	}
</style>
